<template>
  <d2-container>
    <div class="pt-5">
      <el-form :model="form" label-width="100px" ref="form">
        <div style="width: 45%;">
          <el-form-item label="品牌名称" prop="brand_name">
            <el-input v-model="form.brand_name" placeholder="品牌名称"></el-input>
          </el-form-item>
        </div>
        <div style="width: 18%;">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" placeholder="排序"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="产地" prop="country">
          <el-select v-model="form.country" placeholder="请选择产地">
            <el-option v-for="country in countryList" :key="country.id" :label="country.country_name"
              :value="country.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="brand_logo">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
            :on-success="handleLogoSuccess">
            <img v-if="form.brand_logo" :src="form.brand_logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="封面图片" prop="cover_image">
          <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
            :on-success="handleCoverSuccess">
            <img v-if="form.cover_image" :src="form.cover_image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <div style="width: 80%;height: 500px;">
          <el-form-item label="简介" prop="describe">
            <d2-quill v-model="form.describe" />
          </el-form-item>
        </div>
        <div class="row" style="width: 80%;">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存并提交</el-button>
          </el-form-item>
        </div>
      </el-form>

    </div>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    countryListUrl,
    brandsdetailUrl,
    brandsCreateUrl,
    brandsUpdateUrl,
  } from '@/utils/product'
  import {
    baseURL
  } from '@/utils/request'
  import d2Quill from '@/components/d2-quill'
  export default {
    name: "addBrand",
    components: {
      d2Quill
    },
    data() {
      return {
        form: {
          brand_name: '',
          sort: '',
          country: '',
          brand_logo: '',
          cover_image: '',
          describe: ''
        },
        countryList: [],
        actionUrl: baseURL + imagesUploadUrl,
        editor: null,
        toolbarConfig: {},
        editorConfig: {
          placeholder: '请输入内容...'
        },
        getBrandId: '',
        addBrandStatu: true

      }
    },
    mounted() {
      if (this.$route.query.brandId) {
        this.getBrandId = this.$route.query.brandId
        this.addBrandStatu = false
        this.getBrandsdetail()
      }
    },
    created() {
      this.$get(countryListUrl).then(res => {
        this.countryList = res.data.data.list
      })
    },
    methods: {
      getBrandsdetail() {
        this.$get(brandsdetailUrl + this.getBrandId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              brand_name: res.data.data.brand_name,
              sort: res.data.data.sort,
              country: res.data.data.country,
              brand_logo: res.data.data.brand_logo,
              cover_image: res.data.data.cover_image,
              describe: res.data.data.describe
            }
          }
        })
      },
      submitForm() {
        if (this.addBrandStatu) {
          this.$post(brandsCreateUrl, this.form).then(res => {
            if (res.data.code == 200) {
              this.form = {}
              this.openPrompt()
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$put(brandsUpdateUrl + this.getBrandId + '/', this.form).then(res => {
            if (res.data.code == 200) {
              this.form = {}
              this.openPrompt()
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      },
      openPrompt() {
        this.$message({
          message: '添加文章成功',
          type: 'success'
        });
      },
      handleLogoSuccess(val) {
        this.form.brand_logo = val.data.url
      },
      handleCoverSuccess(val) {
        this.form.cover_image = val.data.url
      },
    }
  }
</script>

<style lang="scss">
  .ql-container {
    width: 100%;
    height: 400px;
  }
</style>